// 使用webgl绘制三角形
export const webglFunction = (canvas, pointArr) => {
  // 1创建webgl上下文
  const webgl = canvas.getContext('webgl')
  // 2创建webgl程序
  // 创建顶点着色器和片元着色器
  // 声明变量，类型为vec2(二维向量) 变量名
  // GLSL编程语言
  // 通过 gl_Position 设置顶点
  // 顶点着色器
  const vertex = `attribute vec2 position;
                  varying vec3 color;
                  void main() {
                      gl_PointSize = 1.0;
                      color = vec3(0.5 + position * 0.5, 0.0);
                      gl_Position = vec4(position * 0.5, 1.0, 1.0);
                  }`
  // // 通过 gl_Position 设置顶点
  // // 片元着色器
  const fragment = `precision mediump float;
                    varying vec3 color;
                    void main() {
                        gl_FragColor = vec4(color, 1.0);
                    }`

  const vertexShader = webgl.createShader(webgl.VERTEX_SHADER)
  webgl.shaderSource(vertexShader, vertex)
  webgl.compileShader(vertexShader)

  const fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER)
  webgl.shaderSource(fragmentShader, fragment)
  webgl.compileShader(fragmentShader)

  // 创建 WebGLProgram 对象,并将vertexShader和fragmentShader关联到webgl程序上
  const program = webgl.createProgram()
  webgl.attachShader(program, vertexShader)
  webgl.attachShader(program, fragmentShader)
  // 并将WebGLProgram 对象链接到webgl上下文
  webgl.linkProgram(program)
  // 启用WebGLProgram对象,在绘制图形时，gpu会自动去执行WebGLProgram对象设定的两个shader
  webgl.useProgram(program)
  // 3将数据存入缓冲区
  const points = pointArr

  // 创建一个缓存对象
  const bufferId = webgl.createBuffer()
  webgl.bindBuffer(webgl.ARRAY_BUFFER, bufferId)
  // 把当前数据写入缓存对象
  webgl.bufferData(webgl.ARRAY_BUFFER, points, webgl.STATIC_DRAW)
  // 4将缓冲区数据读取到gpu上
  // 获取顶点着色器中的position变量的地址
  const vPosition = webgl.getAttribLocation(program, 'position')
  // 给变量设置长度和类型
  webgl.vertexAttribPointer(vPosition, 2, webgl.FLOAT, false, 0, 0)
  // 激活这个变量
  webgl.enableVertexAttribArray(vPosition)
  // 5执行着色器程序完成绘制
  // 将当前画布的内容清除
  webgl.clear(webgl.COLOR_BUFFER_BIT)
  // 传入绘制模式,以三角形为图元绘制,再传入绘制的顶点偏移量和顶点数量
  webgl.drawArrays(webgl.TRIANGLE_FAN, 0, points.length / 2)
}
